<template>
	<a-layout-header class="flex justify-center h-60px">
		<a-menu theme="dark" mode="horizontal" v-model:selectedKeys="selectedKeys">
			<a-menu-item key="restful">
				<router-link to="/app/restful/list">
					<span>Restful</span>
				</router-link>
			</a-menu-item>
			<a-menu-item key="graphql">
				<router-link to="/app/graphql/list">
					<span>GraphQL</span>
				</router-link>
			</a-menu-item>
		</a-menu>
	</a-layout-header>
</template>

<script setup lang="ts">
const selectedKeys = ref<string[]>();
const route = useRoute();
const updateMenuSelectKeys = () => {
	if (route.path.includes('restful')) {
		selectedKeys.value = ['restful'];
	}
	if (route.path.includes('graphql')) {
		selectedKeys.value = ['graphql'];
	}
};
watch(() => route.path, updateMenuSelectKeys, { immediate: true });
</script>

<style scoped></style>
